<template>
  <div id="app" class="material-pack">
    <!-- 头部导航 -->
    <van-nav-bar left-arrow title="原料包录入" @click-left="comeBack" left-text="返回">
      <template #right>
        <span @click="addPackFn"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>

    <!-- 滚动 -->
    <better-scroll class="body-scroll" :data="packageData" :total-page="1" :pulldown="false" :pullup="false">
      <van-swipe-cell v-show="packageData.length > 0" v-for="(row, rIndex) in packageData" style="padding-bottom: 0.5rem">
        <template #default>
          <div class="data-card" :class="renderClassFn(row)">
            <div style="border-bottom: 1px solid #8191c5; color: #1677FF;justify-content: space-between">
              <span style="color: #8191c5;font-size: 1.1rem;">{{ row.materialName }}</span>
              <span style="color: #8191c5;font-size: 1rem">批次:{{ row.batchNo }}</span>
            </div>
            <div style="justify-content: space-between">
              <van-field :readonly="row.id > 0" label-width="20vw" label-align="right" label="标重" colon type="number" v-model="row.weight" style="width: 60vw">
                <template #extra>
                  <span style="font-size: 1.1rem; color: #671c1c;line-height: 1.4rem;">kg</span>
                </template>
              </van-field>
              <van-field :readonly="row.id > 0" label-width="20vw" label-align="right" label="净重" colon type="number" colon v-model="row.netWeight" style="width: 60vw">
                <template #extra>
                  <span style="font-size: 1.1rem; color: #671c1c;line-height: 1.4rem;">kg</span>
                </template>
              </van-field>
            </div>
            <div style="justify-content: space-between">
              <van-field :readonly="row.id > 0" label-width="22vw" label-align="right" label="标准回潮" colon type="number" colon v-model="row.stdMoisture" style="width: 60vw">
                <template #extra>
                  <span style="font-size: 1.1rem; color: #671c1c;line-height: 1.4rem;">%</span>
                </template>
              </van-field>
              <van-field :readonly="row.id > 0" label-width="22vw" label-align="right" label="实际回潮" colon type="number" colon v-model="row.actualMoisture" style="width: 60vw">
                <template #extra>
                  <span style="font-size: 1.1rem; color: #671c1c;line-height: 1.4rem;">%</span>
                </template>
              </van-field>
            </div>
          </div>
        </template>
        <template #right>
          <div style="display: flex; flex-flow: column; padding-right: 2vw;">
            <van-button square style="margin-top: 1vh;" text="删除" type="danger" @click="delPackageDataFn(row, rIndex)" />
          </div>
        </template>
      </van-swipe-cell>
      <van-empty  v-show="packageData.length == 0" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" description="暂无数据" ></van-empty>
    </better-scroll>

    <!-- 底部按钮 -->
    <div style="display: flex;justify-content: center;align-items: center; padding: 1vh 0vw;">
      <van-button type="primary" @click="addConfirmFn">操作确认</van-button>
    </div>
  </div>
</template>

<script>
import {comeBack} from "@/utils";
import {SPLIT_COLON, SPLIT_XHX} from "@/api/enum";
import {loadMaterialBatchDetail} from "@/api/feed";
import {
  addMaterialPackFromPlanMaterial,
  delMaterialPackage4Manual,
  loadMaterialPackByPlanMaterialData
} from "@/api/material";

export default {
  name: "materialPack",
  data() {
    return {
      SPLIT_XHX, SPLIT_COLON,
      /* 查询相关 */
      queryParam: {
        keyLike: "",
      },

      /* 当前数据 */
      feedPlan: null,
      usage: null,
      curPack: null,

      /* 列表相关 */
      packageData: [],
      totalPage: 0,
    }
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    comeBack,

    /* 初始化 */
    initFn() {
      const that = this;

      //上级数据
      that.feedPlan = window.api.pageParam.feedPlan;
      that.usage = window.api.pageParam.usage;

      //加载数据 必须在赋值后
      that.loadPackageDataFn();

      //请求回潮数据
      loadMaterialBatchDetail(that.usage.refBatchId, data => {
        that.usage.actualMoisture = data.actMoistureRegain;
        that.usage.stdMoisture = data.stdMoisture;
      });
    },

    /* 增加包 */
    addPackFn() {
      const that = this;
      if(that.usage.outId > 0) {
        that.$toast.fail("已接收,不能加包");
        return;
      }
      let lastIndex = that.usage.refName.lastIndexOf(SPLIT_XHX);
      let materialName = that.usage.refName.substring(0, lastIndex);
      let pack = {
        id: 0,
        planId: that.feedPlan.id,
        planNo: that.feedPlan.yarnNo,
        materialId: that.usage.refId,
        materialName: materialName,
        usageIds: that.usage.type + SPLIT_COLON + that.usage.id,    //用量 这里单个
        batchId: that.usage.refBatchId,
        batchNo: that.usage.refLotNo,
        weight: "",
        netWeight: "",
        actualMoisture: that.usage.actualMoisture,
        stdMoisture: that.usage.stdMoisture,
        status: 2,
      };
      that.curPack = pack;
      that.packageData.push(pack);
    },

    /* 加载包数据 */
    loadPackageDataFn() {
      const that = this;
      that.packageData.splice(0, that.packageData.length);
      loadMaterialPackByPlanMaterialData({
        materialId: that.usage.refId,
        planId: that.usage.planId
      }, data => {
        if(!data.code && data.code != 0) {
          data.filter(pack => pack.refId == that.usage.outId).forEach(pack => {
            that.packageData.push(pack);
          });
        }
      });
    },

    /* 删除包 */
    delPackageDataFn(row, index) {
      const that = this;
      if(row.id > 0) {
        //删除包
        delMaterialPackage4Manual({packageId: row.id}, () => {
          that.$toast.success("删除成功");
          that.packageData.splice(index, 1);
        });
      } else {
        that.packageData.splice(index, 1);
      }
    },

    /* 渲染 */
    renderClassFn(row) {
      if(row.id > 0 && row.status == 2) {
        return "status-in";
      } else if(row.id > 0 && row.status == 3) {
        return "status-out";
      } else {
        return "";
      }
    },

    /* 新增确认 */
    addConfirmFn() {
      const that = this;
      let params = that.packageData.filter(pack => pack.id == 0).filter(pack => Number(pack.weight) > 0 && Number(pack.netWeight) > 0);
      if(params.length == 0) {
        that.$toast.fail("没有需要增加的包")
        return;
      }
      addMaterialPackFromPlanMaterial(params, () => {
        that.$toast.success("增加成功");
        that.loadPackageDataFn();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.material-pack {
  height: 100%;
  .body-scroll {
    height: 86vh;
    overflow: hidden;
    .van-swipe-cell__right {
      display: flex;
      flex-flow: column;
    }
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      display: flex;
      flex-flow: column;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
        ::v-deep .van-field__label {
          font-size: 1.1rem;
          color: #671c1c
        }
        ::v-deep .van-field__control {
          font-size: 1.1rem;
          color: #671c1c;
          border-bottom: 1px solid #e6a23c;
        }
      }
    }
    .status-in {
      box-shadow: 0.3rem 0.5rem 0.3rem #c94949;
    }
    .status-out {
      box-shadow: 0.3rem 0.5rem 0.3rem #41d249;
    }
  }
}
</style>